<!-- 员工 -->
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <pageTools :show-before="true">
        <span slot="before">共{{ this.page.total }}条记录</span>
        <template slot="after">
          <el-button size="small" type="warning">导入</el-button>
          <el-button size="small" type="danger">导出</el-button>
          <el-button size="small" type="primary">新增员工</el-button>
        </template>
      </pageTools>
      <!-- 放置表格和分页 -->
      <el-card v-loading="loading">
        <el-table border :data="list">
          <el-table-column label="序号" sortable="" type="index" />
          <el-table-column label="姓名" sortable="" prop="username" />
          <el-table-column label="工号" sortable="" prop="workNumber" />
          <el-table-column label="聘用形式" sortable="" prop="formOfEmployment">
            <template slot-scope="scope">
              <span>{{
                scope.row.formOfEmployment == 1
                  ? "正式"
                  : scope.row.formOfEmployment == 2
                  ? "非正式"
                  : "未知"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="部门" sortable="" prop="departmentName" />
          <el-table-column label="入职时间" sortable="" prop="timeOfEntry" />
          <el-table-column
            label="账户状态"
            align="center"
            sortable=""
            prop="enableState"
          >
            <template slot-scope="{ row }">
              <!-- 根据当前状态来确定 是否打开开关 -->
              <el-switch :value="row.enableState === 1" />
            </template>
          </el-table-column>
          <el-table-column label="操作" sortable="" fixed="right" width="280">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="$router.push(`/employees/detail/${scope.row.id}`)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button
                type="text"
                size="small"
                @click="editRole(scope.row.id)"
                >角色</el-button
              >
              <el-button type="text" size="small" disabled>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            layout="prev, pager, next"
            :page-size="page.size"
            :current-page="page.page"
            :total="page.total"
            @current-change="changePage"
          />
        </el-row>
        <!-- 放置角色分配组件 -->
        <assignRole
          ref="assignRole"
          :show-role-dialog.sync="showRoleDialog"
          :user-id="userId"
        />
      </el-card>
    </div>
  </div>
</template>

<script>
import { getEmployeeList } from "@/api/employees";
import pageTools from "@/components/PageTools/index.vue";
import assignRole from "@/views/employees/assign-role.vue";
export default {
  name: "employees",
  data() {
    return {
      loading: false,
      list: [], // 接数据的
      page: {
        page: 1, // 当前页码
        size: 10,
        total: 0, // 总数
      },
      userId: "",
      showRoleDialog: false,
    };
  },
  created() {
    this.getEmployeeList();
  },
  components: {
    pageTools,
    assignRole,
  },

  computed: {},

  mounted() {},

  methods: {
    changePage(newPage) {
      this.page.page = newPage;
      this.getEmployeeList();
    },
    async getEmployeeList() {
      this.loading = true;
      const res = await getEmployeeList(this.page);
      console.log(res);
      this.page.total = res.data.data.total;
      this.list = res.data.data.rows;
      this.loading = false;
    },
    // 编辑角色
    async editRole(id) {
      this.userId = id; // props传值 是异步的
      await this.$refs.assignRole.getUserDetailById(id); // 父组件调用子组件方法
      this.showRoleDialog = true;
    },
  },
  watch: {},
  mixins: [],
};
</script>
<style  scoped>
</style>